<template>
  <div>
    <page-header back title="添加新用户"></page-header>
    <page-main padding="0px" background="transparent">
      
      <pageChunkTitle icon="icon-edit" title="基本信息" description="提示文本" ></pageChunkTitle>
      <pageCard >
         <el-form
          ref="form"
          :model="form"
          size="small"
          label-width="160px"
          label-position="left"
        >
          <el-form-item label="头像">
             <taAvatar size="60"></taAvatar>
          </el-form-item>

          <el-form-item label="用户名">
            <el-input v-model="form.username"></el-input>
          </el-form-item>

          <el-form-item label="昵称">
            <el-input v-model="form.nickname"></el-input>
          </el-form-item>

          <el-form-item label="登录密码">
            <el-input v-model="form.password"></el-input>
          </el-form-item>

          <el-form-item label="角色">
            <el-checkbox-group v-model="form.role">
              <el-checkbox
                v-for="item in userRoles"
                :key="item._id"
                :label="item._id"
                >{{ item.role_name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="性别">
            <el-radio-group v-model="form.gender">
              <el-radio
                v-for="(item, index) in userGender"
                :key="index"
                :label="index"
                >{{ item }}</el-radio
              >
            </el-radio-group>
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="form.status" placeholder="请选择用户状态">
              <el-option
                v-for="(item, index) in userStatus"
                :key="index"
                :label="item"
                :value="index"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="备注">
            <el-input type="textarea" v-model="form.comment"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="sumbit">提交</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </pageCard>
    </page-main>
    <page-footer></page-footer>
  </div>
</template>

<script>
import { mapState } from "vuex";
import taAvatar from '~/avatar/avatar.vue'
import pageChunkTitle from '~/page-chunk/page-chunk.vue'
import pageCard from "~/page-card/page-card.vue";
import pageFooter from "~/page-footer/page-footer.vue";
import pageHeader from "~/page-header/page-header.vue";
import pageMain from "~/page-main/page-main.vue";
export default {
  components: {
    taAvatar,
    pageChunkTitle,
    pageCard,
    pageFooter,
    pageHeader,
    pageMain,
  },
  computed: {
    ...mapState(["userStatus", "userGender"]),
  },
  data() {
    return {
      // 用户类型
      userType: [],
      // 角色
      userRoles: [],

      form: {
        username: "", // 用户名
        nickname: "", // 昵称
        password: "", // 密码
        gender: 0, // 性别
        type: "621dbd8c998ca500019c74fd", // 用户类型
        role: [], // 角色
        comment: "", // 备注
        SuperAdmin: false, // 是否为超级管理员
        status: 0, // 状态
      },
    };
  },

  methods: {
    // 提交表单
    sumbit() {

      let url = '/user/add'

      this.$axios({
        url:url,
        method: "POST",
        data: this.form,
      })
        .then((res) => {
          console.log(res);
          this.$message.success(res.msg);
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    back() {
      this.$router.back();
    },
  },
  created() {
    // 获取所有账户类型
    this.$axios({
      url: this.$api.user,
      method: "GET",
      params: {
        action: "userType",
        params: {},
      },
    })
      .then((res) => {
        if (res.data.code == 0) {
          this.userType = res.data.data;

          return this.$axios({
            url: this.$api.user,
            method: "GET",
            params: {
              action: "roles",
              params: {},
            },
          });
        }
      })
      .then((res) => {
        if (res.data.code == 0) {
          this.userRoles = res.data.data;
        }
      });
  },
};
</script>

<style scoped="scoped">
.add-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.form {
}
</style>
